<!--
 * @Author: 高国强 dx_gaogq@dxinfor.com
 * @Date: 2025-08-18 14:11:26
 * @LastEditors: 高国强 dx_gaogq@dxinfor.com
 * @LastEditTime: 2025-08-18 14:13:02
 * @FilePath: \fishcat\src\views\discreteness\VirtualList\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import TimeSlicing from "./TimeSlicing.vue";
import VirtualList from "./VirtualList.vue";
import type { InfoCategory, ColumnProperty } from "./type";
const navInx = ref(1);
const navs = [
  { name: "时间分片", component: TimeSlicing },
  { name: "虚拟列表", component: VirtualList },
];
function navClick(inx: number) {
  navInx.value = inx;
}
const columns: ColumnProperty[] = [
  { lab: "姓名", prop: "name" },
  { lab: "籍贯", prop: "area" },
  { lab: "地址", prop: "addr" },
];
const info = {
  name: "厉飞羽",
  area: "越国青牛镇清水河村油坊队",
  addr: "天南大陆落云宗药园碧波洞",
};
const infoList: InfoCategory[] = [];
init();
function init() {
  for (let i = 0; i < 10000; i++) {
    infoList.push({
      id: i + 1,
      name: "厉飞羽" + (i + 1),
      area: "越国青牛镇清水河村油坊队" + (i + 1),
      addr: "天南大陆落云宗药园碧波洞" + (i + 1),
    });
  }
}
</script>
<template>
  <div class="container">
    <div class="title">
      <div
        class="navs_list"
        v-for="(nav, inx) in navs"
        :key="nav.name"
        @click="navClick(inx)"
      >
        <div :class="['nav_btn', navInx == inx && 'checked']">
          <el-icon><Clock v-if="inx == 0" /><Histogram v-else /></el-icon>
          <span>{{ nav.name }}</span>
        </div>
      </div>
    </div>
    <div class="content">
      <component
        :is="navs[navInx].component"
        :list="infoList"
        :columns="columns"
      ></component>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  .title {
    display: flex;
    height: 46px;
    box-shadow: 0 0 10px #ddd;
    .navs_list {
      flex: 1;
      line-height: 46px;
      cursor: pointer;
      &:first-child {
        border-right: 2px dashed #ccc;
      }
      .nav_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        &.checked {
          color: skyblue;
          text-decoration: underline;
          span {
            font-weight: 700;
          }
        }
        span {
          margin-left: 4px;
        }
      }
    }
  }

  .content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
